<template>
	<view>
		<u-form labelPosition="top" :model="person" labelWidth="100%">
			<view class="form">
				<u-form-item label="选手图片" leftIcon="star-fill" :leftIconStyle="{ color: color_value }" required>
					<u-upload :fileList="images" @afterRead="upload" @delete="deletePic" name="images" :maxCount="4">
					</u-upload>
				</u-form-item>
				<u-form-item label="选手视频" leftIcon="star-fill" :leftIconStyle="{ color: color_value }" required
					v-if="video_show">
					<u-upload :fileList="video" @afterRead="upload" name="video" :maxCount="1" accept="video">
					</u-upload>
				</u-form-item>
				<u-form-item label="选手分组" leftIcon="star-fill" :leftIconStyle="{ color: color_value }"
					@click="group_show=true" v-if="group && group.length > 0" required>
					<u-input v-model="person.group_name" placeholder="请选择分组" border="bottom" disabled
						disabledColor="#ffffff" suffixIcon="arrow-right"></u-input>
					<u-picker :show="group_show" :columns="[group]" keyName="name" @close="group_show=false"
						@cancel="group_show=false" @confirm="confirm()"></u-picker>
				</u-form-item>
				<u-form-item label="选手名称" leftIcon="star-fill" :leftIconStyle="{ color: color_value }" required>
					<u-input v-model="person.name" placeholder="请输入选手名称" border="bottom"></u-input>
				</u-form-item>

				<u-form-item label="选手详情" leftIcon="star-fill" :leftIconStyle="{ color: color_value }">
					<u-textarea v-model="person.desc" placeholder="选填"></u-textarea>
				</u-form-item>

				<view v-if="option.length>0 && !person.id">
					<u-text text="以下为附加信息,不予公开,提交后不得更改" color="#f00"></u-text>
					<u-form-item :label="item" leftIcon="star-fill" :leftIconStyle="{ color: color_value }" required
						v-for="(item, index) in option" :key="index">
						<u-input v-model="person.option[item]" :placeholder="'请输入'+item" border="bottom"></u-input>
					</u-form-item>
				</view>
				<!-- #ifdef MP-WEIXIN -->
				<ad :unit-id="ad.vote_apply" v-if="ad.vote_apply" ad-intervals="30"></ad>
				<!-- #endif -->
				<button @click="submit" class="submit" :style="'background-color:'+color_value">
					提交
					<!-- #ifdef H5 -->
					<wx-open-subscribe v-if="subscription"
						:template="subscription.wechat_baomingshenhe+','+subscription.wechat_baomingchenggong"
						id="subscribe-btn" ref="subscribeBtn"
						style="width: 100%; z-index: 2; height: 100%;position:absolute;top:0;left:0;bottom:0;">
						<script type="text/wxtag-template">
							<style>
								.btn2 {
									width:100%;
									height:40px;
									border: none;
									opacity: 0;
								}
							</style>
							<button class="btn2"></button>
						</script>
					</wx-open-subscribe>
					<!-- #endif -->
				</button>
			</view>
		</u-form>
	</view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex';
	export default {
		computed: {
			...mapGetters({
				imgUrl: 'common/cdnurl',
				color: 'common/color',
				color_value: 'common/color_value',
				ad: 'common/ad',
				subscription: 'common/subscription',
			})
		},
		data() {
			return {
				group_show: false,
				group: [],
				option: [],
				images: [],
				video_show: false,
				video: [],
				vote: null,
				manage: 0,
				person: {
					vote_id: 0,
					group_id: 0,
					group_name: '',
					name: '',
					images: [],
					video: '',
					desc: '',
					type: 0,
					status: 10,
					option: [],
					options: [],
				},
			};
		},
		onLoad: function(options) {
			this.utils.hideShare()
			this.http(
				'vote/group', {
					vote_id: options.vote_id
				},
				'get'
			).then(res => {
				this.group = res.data || [];
			});
			this.http(
				'vote/detail', {
					vote_id: options.vote_id
				},
				'get'
			).then(res => {
				this.vote = res.data;
				this.option = res.data.option || [];
				if (this.vote.mold == '2') {
					this.video_show = true;
				}
			});
			this.person.vote_id = options.vote_id
			this.manage = options.manage
			if (options.manage == 1) {
				//管理员
				this.person.type = 0
				this.person.status = 20
				if (options.person_id) {
					this.http('person/detail', {
						id: options.person_id
					}, 'get').then(res => {
						if (res.data) {
							this.person = res.data.person
							for (var i in this.person.images) {
								this.images.push({
									url: this.imgUrl + this.person.images[i],
									status: 'success',
									message: ''
								})
							}
							if (this.person.video) {
								this.video.push({
									url: this.imgUrl + this.person.video,
									status: 'success',
									message: ''
								})
							}
						}
					});
				}
			} else {
				//用户需要检查是否已报名
				this.http('person/apply_check', {
					vote_id: options.vote_id
				}, 'get').then(res => {
					if (res.data) {
						this.person = res.data
						this.person.images.map((item) => {
							this.images.push({
								url: this.imgUrl + item,
								status: 'success',
								message: ''
							})
						})
						if (this.person.video) {
							this.video.push({
								url: this.imgUrl + this.person.video,
								status: 'success',
								message: ''
							})
						}
					}
				});
			}
		},
		onShow() {
			if (getApp().globalData.audio) {
				getApp().globalData.audio.destroy();
				getApp().globalData.audio = null;
			}
		},
		onReady() {
			// #ifdef H5
			this.$jweixin.ready(() => {
				this.$nextTick(() => {
					var btn = this.$refs.subscribeBtn;
					btn.addEventListener('success', ({
						detail
					}) => {
						console.log('success1', detail);
						this.submit()
					});
					btn.addEventListener('error', ({
						detail
					}) => {
						console.log('fail1', detail);
					});
				})
			})
			// #endif
		},
		methods: {
			async upload(event) {
				await this.utils.uploadFile(this, event.file.url).then(res => {
					if (event.name == 'video') {
						this.video.push({
							url: res.data.fullurl,
							status: 'success',
							message: ''
						})
						this.person.video = res.data.url
					} else {
						this.images.push({
							url: res.data.fullurl,
							status: 'success',
							message: ''
						})
						this.person.images.push(res.data.url)
					}
				});
			},

			deletePic(event) {
				this.images.splice(event.index, 1)
				this.person.images.splice(event.index, 1)
			},

			confirm(e) {
				this.person.group_id = e.value[0].id;
				this.person.group_name = e.value[0].name;
				this.group_show = false
			},

			submit() {

				if (this.person.images.length == 0) {
					uni.$u.toast('请上传选手图片')
					return;
				}

				if (this.vote.mold == 2 && !this.person.video) {
					uni.$u.toast('请上传选手视频')
					return;
				}

				if (this.group && this.group.length > 0 && this.person.group_id == 0) {
					uni.$u.toast('请选择选手分组')
					return;
				}

				if (!this.person.name) {
					uni.$u.toast('请填写选手名称')
					return;
				}

				if (this.option && this.person.option && this.option.length != this.person.option.length) {
					for (var i in this.option) {
						if (!this.person.option[this.option[i]]) {
							uni.$u.toast('请填写' + this.option[i])
							return;
						} else {
							let value = this.person.option[this.option[i]];
							this.person.option.splice(i, 1);
							let json = {}
							json[this.option[i]] = value
							this.person.option.push(json)
						}
					}
				}

				if (Array.isArray(this.person.images)) {
					this.person.image = this.person.images[0];
					this.person.images = this.person.images.join(',');
				}

				if (this.manage == 1) {
					var url = 'person/save'
				} else {
					var url = 'person/apply'
				}

				//#ifdef MP-WEIXIN
				let tmplIds = []
				if (this.subscription && this.subscription != null && this.subscription != 'null') {
					tmplIds = [this.subscription.baomingchenggong, this.subscription.baomingshenhe]
				}
				uni.requestSubscribeMessage({
					tmplIds: tmplIds,
					complete: res => {
						this.person.send = false;
						if (tmplIds[0] && res[tmplIds[0]] == 'accept'){
							this.person.send = true;
						}
						// #endif
						this.http(url, this.person, 'post').then(res => {
							uni.$u.toast('报名成功')
							uni.navigateBack();
						});
						//#ifdef MP-WEIXIN
					}
				});
				// #endif
			},

		}
	};
</script>

<style lang="scss">
	.form {
		padding: 0 30rpx 30rpx;
		background-color: #fff;

		.u-form-item {
			min-height: 80px;
		}

		.u-form-item__body__left {
			width: 150px !important;

			.u-icon__icon {
				font-size: 50px;
			}
		}

		.u-upload,
		.u-textarea {
			margin-top: 10px;
		}
	}

	.submit {
		width: 90%;
		height: 40px;
		line-height: 40px;
		color: #fff;
		border-radius: 100px;
		margin: 0 auto;
		margin-top: 20px;
		font-size: 14px;
		position: relative;
	}
</style>
